import React from 'react'
import { Modal, Form, Input, Button, message } from 'antd'
import copy from 'copy-to-clipboard'

function UserModal({ onSearch, unionId, loading, visible, handleOk, handleCancel, item, ...modalProps }) {
  const [form] = Form.useForm()

  const onOk = (item) => {
    // handleOk(item)
    onSearch({ openId: item.openid })
  }

  const onCancel = () => {
    handleCancel()
  }

  const onCopy = () => {
    if (copy(unionId)) {
      message.success('复制成功')
    } else {
      message.warning('复制失败')
    }
  }

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  }

  return (
    <Modal
      visible={visible}
      onOk={form.submit}
      onCancel={onCancel}
      {...modalProps}
      footer={false}
    >
      <Form
        {...layout}
        form={form}
        onFinish={onOk}
      >
        <Form.Item
          label="OpenId"
          name="openid"
          initialValue={item.name}
          rules={[{ required: true, message: '请输入openid!' }]}
        >
          <Input autoComplete="off" placeholder="请输入openid" />
        </Form.Item>
        {unionId && <Form.Item label="UnionId"><div className="tool-text" onClick={onCopy}>{unionId}</div></Form.Item>}
        <div style={{ textAlign: 'center' }}>
          <Button loading={loading} type="primary" htmlType="submit">获取UnionId</Button>
        </div>
      </Form>
    </Modal>
  )
}

export default UserModal
